<template>
    <el-table default-expand-all border :data="tableData" style="width: 100%" height="65vh" @sort-change="sortchange">
        <el-table-column type="expand">
            <template #default="props">
                <div :style="{ padding: '0px 64px' }">

                    <div v-html="props.row.context" class="editor-content-view">

                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="user.name" label="用户" width="120" />
        <el-table-column prop="activity.name" label="题目名称" />
        <el-table-column prop="activity.ID" label="题单ID" />
        <el-table-column sortable :formatter="(row) => isuse[row.state]" prop="state" label="是否通过" />
        <el-table-column label="操作" width="150">
            <template #default="scope">
                <el-button type="info" @click="
                    dialogVisible = true;
                updatedata = scope.row;
                ">
                    查看
                </el-button>
                <el-button type="danger" @click="del(scope.row.ID)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog width="80%" destroy-on-close title="查看" v-model="dialogVisible">
        <el-form :model="updatedata" label-width="150px">
            <el-form-item v-show="updatedata.activity" label="比赛名称:">
                {{ updatedata.activity ? updatedata.activity.name : "" }}
            </el-form-item>
            <el-form-item v-show="updatedata.user" label="提交用户:">
                {{ updatedata.user ? updatedata.user.name : "" }}
            </el-form-item>

            <el-form-item v-show="updatedata.userid" label="提交用户id:">
                {{ updatedata.userid }}
            </el-form-item>
            <el-form-item v-show="updatedata.activityid" label="比赛id:">
                {{ updatedata.activityid }}
            </el-form-item>
            <el-form-item v-show="updatedata.createdAt" label="提交时间:">
                {{ TimeYH(updatedata.createdAt) }}
            </el-form-item>
            <el-form-item v-show="updatedata.context" label="提交内容:">
                <div v-html="updatedata.context" class="editor-content-view"></div>
            </el-form-item>
            <el-form-item label="是否置顶">
                <el-select v-model="updatedata.top">
                    <el-option label="不置顶" :value="false" />
                    <el-option label="置顶" :value="true" />
                </el-select>
            </el-form-item>
            <el-form-item label="审核状态">
                <el-select v-model="updatedata.state">
                    <el-option label="不通过" :value="0" />
                    <el-option label="通过" :value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注:">
                <el-input v-model="updatedata.examine" :rows="4" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="保存">
                <el-button @click="update">保存</el-button>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="
                    dialogVisible = false;
                IID = 0;
                ">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";

import {
    asyncadmingetmatchcomment,
    asyncadmindelmatchcomment,
    asyncaadminupdatematchcomment,
    Iobj,
} from "../../../api/index";
import { TimeYH } from '../../../util/time'

import Studycodemodel from "../../../mysql_interface/studycodemodel";

import { ElMessage, ElMessageBox } from "element-plus";

import watchusertestcase from "./watchusertestcase.vue";

const p = defineProps<{ obj: Iobj<Studycodemodel.Imatchcomment>, setcount: (n: number) => void, changeobj: (a: any) => void }>()

const e = defineEmits<{
    (event: 'change'): void
    (event: 'update:obj', obj: Iobj<Studycodemodel.Imatchcomment>): void
}>()

const isuse = ["未通过", "已通过", "未处理"];

const dialogVisible = ref(false);

const IID = ref(0);

const tableData = ref<Studycodemodel.Imatchcomment[]>([]);

const updatedata = ref<Studycodemodel.Imatchcomment>({})

async function update() {
    await asyncaadminupdatematchcomment(updatedata.value)
    ElMessage.success('修改成功')
    dialogVisible.value = false
}

async function start() {
    const data = await asyncadmingetmatchcomment(p.obj);
    tableData.value = data.rows;
    p.setcount(data.count)
}



onMounted(() => {
    start();
});

async function next1() {
    await start();
    const index = tableData.value.findIndex((e) => e.ID === IID.value);
    if (index !== tableData.value.length - 1) {
        const id = tableData.value[index + 1].ID;
        if (id) IID.value = id;
    } else {
        dialogVisible.value = false;
    }
}

watch(p.obj, start)

function del(ID: number) {
    ElMessageBox.confirm("确定要删除比赛评论", "确定", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    })
        .then(async () => {
            await asyncadmindelmatchcomment({ ID });
            ElMessage.success("删除成功");
            start();
        })
        .catch((e: any) => {
            console.log(e);
        });
}

function sortchange(row: { order: string; prop: any }) {
    const { prop } = row;
    if (row.order == "descending") {
        p.changeobj({
            _order: prop,
            _sortable: "DESC",
        })
    } else {
        p.changeobj({
            _order: prop,
            _sortable: "ASC",
        })
    }
}

</script>
